<template>
  <h2>morse 对照表（基础）</h2>
  <h3>可点击输入</h3>
  <div class="morse-map">
    <div v-for="(key, index) in Object.keys(morseMap)" :key="index" class="morse-map-item">
      <div class="letter" @click="letterClick" :data-letter="key">{{ key }}</div>
      <div class="morse" @click="morseClick" :data-morse="morseMap[key]">{{ morseMap[key] }}</div>
    </div>
  </div>
  <h2>Morse电码 翻译 编译</h2>
  <h3>示例：hello === ...././.-../.-../--- (输入完morse码后以/结尾)</h3>
  <textarea v-model="morseText" lang="en" @input="morseInput" class="input morse-input" rows="10" cols="100" placeholder="请输入Morse电码"></textarea>
  <textarea v-model="transformMorse" lang="en" @input="pinyinInput" class="input pinyin-input" rows="10" cols="100" placeholder="请输入拼音"></textarea>
  
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getTarget } from "@/utils/index";
import { morseParse, letterToMorse, getMap } from "@/utils/Morse";

const morseText = ref("");
const transformMorse = ref("");
const morseMap = ref(getMap());

watch(morseText, (newVal) => {
  if (!newVal) {
    transformMorse.value = "";
  }
});
const letterClick = (e: Event) => {
  let ev: PointerEvent = e as PointerEvent;
  let tar: HTMLElement = getTarget(ev);
  let letter = tar.dataset.letter;
  transformMorse.value += letter;
  morseText.value = letterToMorse(transformMorse.value);
};

const morseClick = (e: Event) => {
  let ev: PointerEvent = e as PointerEvent;
  let tar: HTMLElement = getTarget(ev);
  let morse = tar.dataset.morse;
  morseText.value += morseText.value ? "/" + morse : morse;
  transformMorse.value = morseParse(morseText.value);
};
const morseInput = (e: Event) => {
  let ev = e as InputEvent;
  let dom: HTMLTextAreaElement = getTarget(e) as HTMLTextAreaElement;
  let val = dom.value;
  let curIpt: string = ev.data || "";
  if (/[.\-\\/]/g.test(curIpt)) {
    morseText.value = val;
  } else {
    morseText.value = val.replace(/(?=)[^.\-\\/]/g, () => {
      return "";
    });
  }
  if (curIpt === "/") {
    transformMorse.value = morseParse(
      morseText.value.slice(0, morseText.value.length - 1)
    );
  }
};

const pinyinInput = (e: Event) => {
  let dom: HTMLTextAreaElement = getTarget(e) as HTMLTextAreaElement;
  let val = dom.value;
  if (/[a-z0-9.:,;?='/!\-_\\()$&@]/g.test(val)) {
    transformMorse.value = val.replace(
      /(?=)[^a-z0-9.:,;?='/!\-_\\()$&@]/g,
      () => {
        return "";
      }
    );
  } else {
    transformMorse.value = val.replace(
      /(?=)[^a-z0-9.:,;?='/!\-_\\()$&@]/g,
      () => {
        return "";
      }
    );
  }
  morseText.value = letterToMorse(transformMorse.value);
};
</script>
<style scoped>
h2{
  padding: 0;
  margin: 0;
}
.morse-map {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  user-select: none;
  /* overflow-x: auto; */
}

.morse-map-item {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  line-height: 80px;
  display: flex;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.letter {
  width: 50%;
  flex: 1;
  background-color: black;
  color: #ffffff;
}

.morse {
  flex: 1;
  font-weight: 550;
  letter-spacing: 2px;
}
</style>
